<template>
  <div class="app-container">
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        label="用户名"
        align="center"
        prop="account"
      />
      <el-table-column
        label="创建时间"
        align="center"
        prop="create_time"
      />
      <el-table-column
        label="最后登录时间"
        align="center"
        prop="last_login_time"
      />
      <el-table-column
        label="最后登录ip"
        align="center"
        prop="last_login_ip"
      />
      <el-table-column
        label="用户状态"
        align="center"
        prop="status"
      />
      <el-table-column>
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"
          />
          <el-button
            size="mini"
            @click=" findUserByCondition(search)"
          >查询</el-button>
        </template>
        <template slot-scope="scope">

          <el-button size="mini" @click="dialogFormVisible = true">编辑</el-button>
          <el-dialog
            style="z-index:2"
            title="编辑用户"
            :modal="false"
            :modal-append-to-body="false"
            :visible.sync="dialogFormVisible"
          >
            <el-form :model="form">
              <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="form.account" autocomplete="off" />
              </el-form-item>
              <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="form.password" autocomplete="off" />
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="updateByAdmin(scope.row)">确 定</el-button>
            </div>
          </el-dialog>
          <template>
            <el-popconfirm
              title="确定删除选定用户吗?"
              @onConfirm="handleDelete(scope.$index, scope.row)"
            >
              <el-button slot="reference" size="mini">删除</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      align="center"
      :current-page="pageInfo.currentPage"
      :page-size="pageInfo.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="pageInfo.pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

</template>

<script>
import { findAllUser } from '@/api/user_hyperion'
import { deleteUser } from '@/api/user_hyperion'
import { findByCondition } from '@/api/user_hyperion'
import { updateUserByAdmin } from '@/api/user_hyperion'
export default {
  data() {
    return {
      tableData: [],
      search: '',
      dialogFormVisible: false,
      form: {
        account: '',
        password: '',
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        password1: ''
      },
      formLabelWidth: '120px',
      pageInfo: {
        currentPage: 1,
        pageSize: 2,
        pageTotal: 0
      }
    }
  },
  created() {
    findAllUser(1).then(res => {
    //   alert(res.data.pages)
      this.tableData = res.data.list
      this.pageInfo.pageSize = res.data.page_size
      this.pageInfo.pageTotal = res.data.total
    })
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      var data = [row.id]
      deleteUser(data)
      this.pageInfo.pageTotal--
      this.tableData = this.tableData.filter((element, i) => {
        return this.tableData[index].id !== element.id
      })
    },
    findUserByCondition(search) {
      const user = []
      findByCondition(1, this.search).then(res => {
        this.pageInfo.pageSize = res.data.page_size
        this.pageInfo.pageTotal = res.data.total
        this.tableData = res.data.list
        // this.tableData = [{ id: 2, account: 'admin1', create_time: '2022-01-18 10:30:57', last_login_time: '2022-01-20 11:43:52', last_login_ip: '0:0:0:0:0:0:0:1', status: 'y' }]
      })
      this.tableData = user
    },
    confirm(index, row) {
      var data = [row.id]
      deleteUser(data)
      this.tableData = this.tableData.filter((element, i) => {
        return this.tableData[index].id !== element.id
      })
    },
    updateByAdmin(row) {
      this.dialogFormVisible = false
      var user = { id: row.id, account: this.form.account, password: this.form.password }
      console.log(user)
      updateUserByAdmin(user).then(res => {
        findAllUser(1).then(res => {
          console.log('-----------------------')
          console.log(res.data)
          // 返回的总页数返回给pageTotal
          this.pageInfo.pageTotal = res.data.total
          this.tableData = res.data.list
        })
      })
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val
    },
    handleCurrentChange(val) {
      this.pageInfo.currentPage = val
      // 先判断搜索框中是否有内容
      if (this.search === '') {
        findAllUser(val).then(res => {
          this.tableData = res.data.list
        })
      } else {
        findByCondition(val, this.search).then(res => {
          console.log(res.data.list)
          this.tableData = res.data.list
        })
      }
    }
  }
}
</script>
